<template>
    <!--主页-->
    <div id="home">
        <!--头部导航栏-->
        <div class="home-header">
            <el-row :gutter="20" style=" height: 3.8rem; width: 100%; position: fixed; top: 0;">
                <el-col :span="8" style="padding-right: 0; padding-left: 10px;">
                    <el-menu text-color="#2d2d2d" mode="horizontal">
                        <el-menu-item style="cursor: default; padding-left: 40px;">
                            <img class="logo_img" src="../assets/images/logo.png" alt="logo">
                            <span><strong>重庆应急管理局科研项目管理系统</strong></span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="13" style="padding: 0;">
                    <el-menu :default-active="$route.path" router active-text-color="#409EFF" text-color="#2d2d2d" mode="horizontal" @select="handleSelect">
                        <el-menu-item v-for="(item, i) in navMenuData" :key="i" style="padding: 0 30px;" :index="item.name">
                            {{ item.navItem }}
                        </el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="3" style="padding: 0;">
                    <el-menu :default-active="$route.path" router text-color="#2d2d2d" class="nav_right"
                             mode="horizontal" @select="handleSelect">
                        <el-menu-item style="padding-right: 0;" index="/login">登录</el-menu-item>
                        <el-menu-item style="padding-left: 30px;" index="/register">注册</el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </div>
        <!--页面的中间部分-->
        <div class="home-main" style="margin-top: 4rem; padding: 30px;">
            <!--跑马灯-->
            <div class="block1">
                <template>
                    <el-carousel height="43rem" indicator-position="outside">
                        <el-carousel-item v-for="(img, index) in imgList" :key="index">
                            <h3 style="text-align: center;">{{ img.desc }}</h3><br>
                            <img :src="img.url">
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </div>
            <!--特色功能-->
            <div class="home-info1" style="margin-top: 3rem; padding: 30px;">
                <h3 style="text-align: center;">特色功能</h3>
                <div class="feature-list" style="margin-top: 3rem;">
                    <el-row :gutter="40" class="one">
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <img alt="" src="../assets/images/home/demand.png">
                                <h4>需求发布中心</h4>
                                <div class="desc">
                                    重庆应急管理局
                                    <br>
                                    官方发布政府项目需求文件
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                                <img alt="" src="../assets/images/home/declare.png">
                                <h4>项目申报</h4>
                                <div class="desc">
                                    查看官方需求文件
                                    <br>
                                    选择申报心仪的项目
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <img alt="" src="../assets/images/home/projectmanage.png">
                                <h4>项目管理</h4>
                                <div class="desc">
                                    管理项目
                                    <br>
                                    细化到项目中的每个任务
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="40" class="two">
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <img alt="" src="../assets/images/home/approve.png">
                                <h4>项目审批</h4>
                                <div class="desc">
                                    对申报项目进行审批
                                    <br>
                                    实时追踪项目申报进度
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                                <img alt="" src="../assets/images/home/report.png">
                                <h4>统计报表</h4>
                                <div class="desc">
                                    统计系统内各种信息
                                    <br>
                                    简洁、直观查看各种统计表
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <img alt="" src="../assets/images/home/team.png">
                                <h4>专家管理</h4>
                                <div class="desc">
                                    管理专家信息
                                    <br>
                                    委派、追踪专家任务
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <!--具体信息-->
            <div class="home-info2" style="margin-top: 3rem; padding: 30px;">
                <h3 class="sub-title">轻松管理项目，助力高效工作</h3>
                <el-row :gutter="40" style="display: flex;">
                    <el-col :span="12">
                        <div class="left_img">
                            <img src="../assets/images/home/job.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="right">
                            <ul>
                                <li>自主设置项目任务</li>
                                <li>紧急度自由设定</li>
                                <li>任务截至通知提醒</li>
                                <li>简洁直观轻松浏览任务</li>
                            </ul>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="home-info3" style="margin-top: 3rem; padding: 30px;">
                <h3 class="sub-title">查询项目需求，按条件申报</h3>
                <el-row :gutter="40" style="display: flex;">
                    <el-col :span="12">
                        <div class="right">
                            <ul>
                                <li>汇聚应急局各部门项目需求</li>
                                <li>各种类型项目应有尽有</li>
                                <li>按需按条件在线申报</li>
                                <li>简化项目申报流程</li>
                            </ul>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="left_img">
                            <img src="../assets/images/home/project.png">
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="home-info4" style="margin-top: 3rem; padding: 30px;">
                <h3 class="sub-title">统计报表，助力发现事物规律</h3>
                <el-row :gutter="40" style="display: flex;">
                    <el-col :span="12">
                        <img src="../assets/images/home/data.jpg">
                    </el-col>
                    <el-col :span="12">
                        <div class="right">
                            <ul>
                                <li>各类型图表可视化数据</li>
                                <li>统计数据直观业务规律</li>
                                <li>排序、汇总，灵活达到期望数据结果</li>
                                <li>轻松查看整体指标、细节指标</li>
                            </ul>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <el-divider />

        <div class="home-footer" style="padding-bottom: 5px; width: 100%; height: 88px;">
            <div class="f-info">
                <a target="_blank" href="http://www.cq.gov.cn/">重庆市人民政府</a>
                <span>|</span>
                <a target="_blank" href="http://yjj.cq.gov.cn/">重庆市应急管理局</a>
                <span>|</span>
                <a target="_blank" href="http://yjj.cq.gov.cn/ggbf_search/lxwm/">联系我们</a>
            </div>
            <p class="f-info-p">
                <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"><span>渝ICP备19005697号-1</span></a>
                <span> &nbsp;&nbsp;政府网站标识码：5000000097 </span>
                <span>&nbsp;&nbsp;<i><img src="http://yjj.cq.gov.cn/images/police.png"></i>&nbsp;渝公网安备： <a
                    target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50019002501595">50019002501595号</a></span>
            </p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            activeIndex: 'home',
            navMenuData: [
                {name: '/home', navItem: '首页'},
                {name: '/demand', navItem: '需求中心'},
                {name: '/expert', navItem: '专家信息库'},
                {name: '/mechanism', navItem: '机构信息库'},
                {name: '/about', navItem: '关于'}
            ],
            imgList: [
                {desc: '简洁直观的工作台，直击要点\n', url: require('../assets/images/home/1.png')},
                {desc: '灵活自由的任务看板，解放创造力', url: require('../assets/images/home/2.png')},
                {desc: '高度聚合的任务载体，纵观全局资源', url: require('../assets/images/home/3.png')},
                {desc: '多项目高效协作，速度快人一等', url: require('../assets/images/home/4.png')}
            ]
        }
    },
    mounted() {
        console.log(this.$route.path)
        this.activeIndex = this.$route.path.substring(1, this.$route.path.length)

    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath)
        }
    }
}
</script>

<style lang="scss" scoped>
#home {
    min-width: 960px;
}
.home-header {
    height: 3.8rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
}
.f-info {
    margin-top: 10px;
    text-align: center;
}
.f-info-p {
    text-align: center;
    font-size: 14px;
    color: #7d7d7d;
    line-height: 28px;
}
span {
    vertical-align: top;
    margin: 0 10px;
}
a {
    vertical-align: top;
    text-decoration: none;
    color: #333;
}
.home-main {
    .block1 {
        img {
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin: auto;
        }
    }
}
.desc {
    word-break: keep-all;
    margin-top: 8px;
    font-size: 14px;
    color: rgba(74, 74, 74, 0.8);
    line-height: 20px;
    text-align: center;
}
h4 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp", sans-serif;
    margin: 8px 0 0 0;
    font-size: 18px;
    font-weight: 520;
    color: black;
    text-align: center;
    line-height: 1.33em;
    padding: 0;
}
.sub-title {
    text-align: center;
    margin: 0;
    padding: 0;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
    margin: 3rem;
    img {
        clear: both;
        display: block;
        margin: auto;
    }
}
.right ul li {
    list-style: none;
    &::before {
        content: "\2022";
        color: #fe7300;
        width: 10px;
        font-size: 24px;
        margin-right: 8px;
        position: relative;
    }
}
.right {
    margin-top: 10rem;
    margin-left: 9rem;
}
</style>
